<template>

  <div class="box">
    <div class="text_input" :style="{color: !disabled ? '#606266' : '#ccc', background: !disabled ? '#fff' : '#F5F7FA'}" @click="change">
      <slot>
        <span style="color: #ccc">{{placeholder}}</span>
      </slot>
    </div>
    <i @click="change" :style="{'color':disabled? '#ccc' : '#336ffc'}" class="el-icon-circle-plus-outline"></i>
    <!-- , 'cursor':disabled?'no' : pointer -->
  </div>
</template>

<script>
export default {
  props: {
    disabled: {
      default: false,
    },
    placeholder: {
      default: "请选择",
    },
  },
  methods: {
    change() {
      if (this.disabled) return;
      this.$emit("change");
    },
  },
};
</script>

<style lang="scss" scoped>
.text_input {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 32px;
  padding: 0 10px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  overflow-x: auto;
}
.box {
  display: flex;
}
.el-icon-circle-plus-outline {
  cursor: pointer;
  padding: 10px 5px;
  font-size: 30px;
  color: #336ffc;
  &:hover {
    color: #477fff;
  }
}
</style>
